/**
 * Created by zzy on 2018/2/8.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    DeviceEventEmitter,
    TextInput,
    StyleSheet,
    Button,
    ScrollView,
    Dimensions
} from 'react-native';
import Constant from "../../js/Contant";
import {GradientButton} from "../../js/component/Button";
import RequestUtil from "../../js/util/NetUtil";
import loginStore from "../store/LoginStoreLuo";
import SetPassword from "./SetPassword";
const ScreenW = Dimensions.get('window').width;
const Attention =()=> {
    return <View style={{justifyContent:'center',alignItems:'center',height:100}}>
        <Text style={{fontSize:15,color:'rgba(51,51,51,1)'}}>短信验证码已发送至您的手机</Text>
        <Text style={{fontSize:15,color:'rgba(51,51,51,1)'}}>请填写验证码</Text>
    </View>
};

const Input = ({value,title='', placeholder, onChangeText, keyboardType = 'default', secureTextEntry = false,editable}) => {
    return <View style={{height:50.5}}>
        <View style={{flexDirection:'row',alignItems:'center',paddingHorizontal:15,height:50,backgroundColor:'white'}}>
            <View style={{flex:1}}>
                <Text style={{fontSize:14,color:'rgba(51,51,51,1)'}}>{title}</Text>
            </View>
            <View style={[{marginLeft:10,height:40,backgroundColor:'white',flex:5}]}>
                <TextInput
                    clearTextOnFocus={true}
                    style={{fontSize:14,fontWeight:'400',height:40,color:'rgba(51,51,51,1)'}}
                    value={value}
                    editable={editable}
                    keyboardType={keyboardType}
                    secureTextEntry={secureTextEntry}
                    placeholder={placeholder}
                    onChangeText={onChangeText}/>
            </View>
        </View>
        <View style={{flexDirection:'row',marginLeft:12,width:ScreenW-24,height:0.5,backgroundColor:'rgba(217,217,217,1)'}}/>
    </View>
}

const LoginBtn = ({onPress,phoneNum=''})=>{
    return  <View style={{height: 40, paddingHorizontal: 15,marginTop:20}}>
        <GradientButton
            onPress={onPress}
            title="下一步"/>
    </View>
}


export default class BindPhoneNum extends Component{
    render(){
        let navigation = this.props.navigation ;
        let {params} = navigation.state ;
        let {phoneNum} = params ;
        return <View style={{flex:1,backgroundColor:'white'}}>
            <Attention />
            <Input
                title='手机号'
                value={phoneNum}
                editable={false}/>
            <Input
                title='验证码'
                placeholder="请填写验证码"
                editable={true}
                onChangeText={(text)=>{
                    this.checkCode = text ;
                }}/>
            <LoginBtn phoneNum={phoneNum} onPress={()=>{
                RequestUtil.requestData('login/bindPhoneNum', {
                    phoneNum: phoneNum,
                    checkCode:this.checkCode
                }).then(token => {
                    if (token) {
                        loginStore.update(this.phoneNum, token.access_token, token.access_secret);
                    }
                    navigation.navigate('SetPassword');
                }).catch(err => {
                    alert(err);
                });
            }}/>
        </View>
    }
}

const styles = {
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
}
